<template>
  <div class="flex flex-col gap-3 flex-1">
    <!-- 顶部筛选条件 -->
    <div class="bg-white p-3 rounded-lg">
      <el-form :inline="true" :model="searchForm" class="flex flex-wrap gap-3">
        <el-form-item label="统计时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcuts"
          />
        </el-form-item>
        <el-form-item label="科室" class="w-1/5">
          <el-select v-model="searchForm.department" placeholder="请选择科室" clearable>
            <el-option
              v-for="dept in departments"
              :key="dept.id"
              :label="dept.name"
              :value="dept.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 业务概览 -->
    <div class="grid grid-cols-4 gap-3">
      <el-card v-for="stat in statistics" :key="stat.label" shadow="hover">
        <div class="flex items-center justify-between">
          <div class="flex flex-col">
            <span class="text-gray-500 text-sm">{{ stat.label }}</span>
            <span class="text-2xl font-bold mt-2" :class="stat.color">{{ stat.value }}</span>
            <span class="text-sm text-gray-400 mt-1">
              较上期
              <span :class="stat.trend === 'up' ? 'text-red-500' : 'text-green-500'">
                {{ stat.trend === 'up' ? '+' : '-' }}{{ stat.percentage }}
              </span>
            </span>
          </div>
          <el-icon :size="40" :class="stat.iconColor">
            <component :is="stat.icon" />
          </el-icon>
        </div>
      </el-card>
    </div>

    <!-- 图表分析区域 -->
    <div class="grid grid-cols-2 gap-3">
      <!-- 科室业务数据分析 -->
      <el-card shadow="hover" class="h-[400px]">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-bold">科室业务数据分析</span>
            <el-radio-group v-model="departmentDataType" size="small">
              <el-radio-button :value="'visits'">就诊人数</el-radio-button>
              <el-radio-button :value="'registration'">挂号收入</el-radio-button>
              <el-radio-button :value="'examination'">检查收入</el-radio-button>
            </el-radio-group>
          </div>
        </template>
        <div ref="departmentChartRef" class="w-full h-full"></div>
      </el-card>

      <!-- 预约分析 -->
      <el-card shadow="hover" class="h-[400px]">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-bold">预约情况分析</span>
            <el-select v-model="appointmentMetric" size="small" class="w-32">
              <el-option label="预约成功率" value="success" />
              <el-option label="爽约率" value="noshow" />
              <el-option label="取消率" value="cancel" />
            </el-select>
          </div>
        </template>
        <div ref="appointmentChartRef" class="w-full h-full"></div>
      </el-card>

      <!-- 医生工作量分析 -->
      <el-card shadow="hover" class="h-[400px]">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-bold">医生工作量分析</span>
            <el-select v-model="workloadMetric" size="small" class="w-32">
              <el-option label="就诊人次" value="visits" />
              <el-option label="诊疗收入" value="income" />
              <el-option label="平均就诊时长" value="duration" />
            </el-select>
          </div>
        </template>
        <div ref="workloadChartRef" class="w-full h-full"></div>
      </el-card>

      <!-- 收入构成分析 -->
      <el-card shadow="hover" class="h-[400px]">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-bold">收入构成分析</span>
            <el-radio-group v-model="incomeTimeRange" size="small">
              <el-radio-button :value="'day'">日</el-radio-button>
              <el-radio-button :value="'week'">周</el-radio-button>
              <el-radio-button :value="'month'">月</el-radio-button>
            </el-radio-group>
          </div>
        </template>
        <div ref="incomeChartRef" class="w-full h-full"></div>
      </el-card>
    </div>

    <!-- 医生绩效排名 -->
    <el-card shadow="hover">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="font-bold">医生绩效排名</span>
          <div class="flex gap-2">
            <el-select v-model="performanceMetric" size="small" class="w-32">
              <el-option label="就诊人次" value="visits" />
              <el-option label="诊疗收入" value="income" />
              <el-option label="患者满意度" value="satisfaction" />
            </el-select>
            <el-button type="primary" size="small" @click="handleExportRanking">
              导出排名
            </el-button>
          </div>
        </div>
      </template>

      <el-table :data="doctorRankings" border stripe>
        <el-table-column type="index" label="排名" min-width="80" align="center" />
        <el-table-column prop="name" label="医生姓名" min-width="120" />
        <el-table-column prop="department" label="所属科室" min-width="120" />
        <el-table-column prop="title" label="职称" min-width="120" />
        <el-table-column prop="visits" label="就诊人次" min-width="120">
          <template #default="{ row }">
            {{ row.visits }}
            <el-tag 
              size="small" 
              :type="row.visitsTrend === 'up' ? 'success' : 'danger'"
              class="ml-2"
            >
              {{ row.visitsTrend === 'up' ? '↑' : '↓' }}{{ row.visitsChange }}%
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="income" label="诊疗收入" min-width="150">
          <template #default="{ row }">
            ¥{{ row.income }}
            <el-tag 
              size="small" 
              :type="row.incomeTrend === 'up' ? 'success' : 'danger'"
              class="ml-2"
            >
              {{ row.incomeTrend === 'up' ? '↑' : '↓' }}{{ row.incomeChange }}%
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="satisfaction" label="满意度" min-width="120">
          <template #default="{ row }">
            {{ row.satisfaction }}%
            <el-rate
              v-model="row.satisfactionScore"
              disabled
              :max="5"
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
              class="ml-2"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="80" fixed="right">
          <template #default="{ row }">
            <el-button type="info" link @click="handleViewDetail(row)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { VChart } from '@visactor/vchart';
// 日期快捷选项
const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  },
  {
    text: '最近一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    }
  },
  {
    text: '最近三月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    }
  }
]

// 搜索条件
const searchForm = ref({
  dateRange: [],
  department: ''
})

// 统计数据
const statistics = ref([
  {
    label: '总就诊人次',
    value: '3,456',
    icon: 'User',
    color: 'text-blue-500',
    iconColor: 'text-blue-200',
    trend: 'up',
    percentage: '15.2%'
  },
  {
    label: '总诊疗收入',
    value: '￥256,800',
    icon: 'Money',
    color: 'text-green-500',
    iconColor: 'text-green-200',
    trend: 'up',
    percentage: '8.5%'
  },
  {
    label: '预约成功率',
    value: '92.5%',
    icon: 'Check',
    color: 'text-orange-500',
    iconColor: 'text-orange-200',
    trend: 'up',
    percentage: '2.3%'
  },
  {
    label: '平均满意度',
    value: '96.8%',
    icon: 'Star',
    color: 'text-purple-500',
    iconColor: 'text-purple-200',
    trend: 'up',
    percentage: '1.2%'
  }
])

// 科室数据
const departments = ref([
  { id: '1', name: '内科' },
  { id: '2', name: '外科' },
  { id: '3', name: '儿科' }
])

// 图表相关
const departmentChartRef = ref(null)
const appointmentChartRef = ref(null)
const workloadChartRef = ref(null)
const incomeChartRef = ref(null)

// 筛选条件
const departmentDataType = ref('visits')
const appointmentMetric = ref('success')
const workloadMetric = ref('visits')
const incomeTimeRange = ref('month')
const performanceMetric = ref('visits')

// 医生绩效数据
const doctorRankings = ref([
  {
    name: '张医生',
    department: '内科',
    title: '主任医师',
    visits: 320,
    visitsTrend: 'up',
    visitsChange: 15,
    income: '45,600',
    incomeTrend: 'up',
    incomeChange: 12,
    satisfaction: 98,
    satisfactionScore: 4.8
  },
  {
    name: '李医生',
    department: '外科',
    title: '副主任医师',
    visits: 280,
    visitsTrend: 'down',
    visitsChange: 5,
    income: '38,900',
    incomeTrend: 'up',
    incomeChange: 8,
    satisfaction: 95,
    satisfactionScore: 4.5
  }
])


// 方法
const handleSearch = () => {
  ElMessage.success('搜索功能待实现')
}

const handleReset = () => {
  searchForm.value = {
    dateRange: [],
    department: ''
  }
}

const handleExportRanking = () => {
  ElMessage.success('导出功能待实现')
}

const handleViewDetail = (row) => {
  ElMessage.success('查看详情功能待实现')
}

onMounted(() => {
})
</script>

